<template>
	<view class="cart">
		<view class="c">
			<view class="list" v-for="item in list" :key='item.id'>
				<view class="l">
					<!-- {{item.isChecked}} -->
					<!-- 列表的复选框 -->
					<evan-checkbox v-model="item.isChecked"></evan-checkbox>

					<image :src="item.img" mode="" class="img"></image>
				</view>
				<view class="center">
					<view class="name">
						{{item.name}}
					</view>
					<view class="size">
						尺寸：{{item.size}}
					</view>
					<view class="count">
						数量：x{{item.count}}
					</view>
				</view>
				<view class="r">
					<!-- 商品小计 -->
					<view class="price">
						<!-- ￥{{item.price*item.count}}元 -->
						￥{{item.sumPrice}}元

					</view>
					<view class="update-count">
						<view class="reduce" @tap="reduce(item.id)">
							-
						</view>
						<view class="cart-count">
							{{item.count}}
						</view>
						<view class="add" @tap="add(item.id)">
							+
						</view>
					</view>
				</view>

			</view>

		</view>

		<!-- 底部导航栏 -->
		<view class="tabbar">

			<view class="all">
				<evan-checkbox v-model="isAllChecked"></evan-checkbox>全选
			</view>
			<view class="totalPrice">
				总价:￥{{cartTotalPrice}}元
			</view>
			<view class="submitOrder" @tap="submitOrder">
				付款
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				list: []

			}
		},
		computed: {
			// 全选
			isAllChecked: {
				// list列表--->全选
				get() {
					// 列表中是否都选中了
					return this.list.every(el => el.isChecked == true)
				},
				// 全选---->list列表
				set(val) {
					console.log(val);
					this.list.forEach(el => el.isChecked = val)
				}
			},
			// 购物车商品总价
			cartTotalPrice() {
				// 计算list列表中所有选中商品的价格
				var sum = 0
				this.list.forEach(el => {
					if (el.isChecked) {
						sum = el.sumPrice + sum
					}
				})
				console.log(sum, 'sum')
				return sum
			}

		},
		methods: {

			// 增加商品数量
			add(id) {

				this.list.forEach(el => {
					if (el.id == id) {
						if (el.count < el.stock) {
							el.count++

							// 商品小计价格也要改变
							el.sumPrice = el.count * el.price
						} else {
							uni.showToast({
								title: '库存不足哦~',
								icon: 'none'
							})
						}
					}

				})

			},
			// 减少商品数量
			reduce(id) {
				this.list.forEach(el => {
					if (el.id == id) {
						if (el.count > 1) {
							el.count--
							// 商品小计价格也要改变
							el.sumPrice = el.count * el.price
						} else {
							uni.showToast({
								title: '至少购买一件商品哦',
								icon: 'none'
							})
						}
					}

				})

			},

			// 提交购物车订单
			submitOrder() {

				// 判断是否选择购物车商品
				var bol = this.list.every(el => el.isChecked == false)

				// 列表中未选中提示……
				if (bol) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
				} else {
					// 提交选中的订单列表
					var cartList = [];
					this.list.forEach(el => {
						if (el.isChecked) {
							cartList.push(el)
						}
					})
					// 2、过滤选中的列表并返回
					//cartList=this.list.filter(el=>el.isChecked)

					// 购物车总价
					cartList.totalPrice = this.cartTotalPrice;

					// 购物车列表（购物车总价、购物车具体商品）
					console.log(cartList)

				}

			}



		},
		onShow() {

			// 模拟从后台拿到的数据
			var orginList = [{
					id: '0',
					name: '西瓜红红薯',
					price: 20,
					count: 1,
					size: '小',
					sumPrice: 20,
					stock: 22,
					img: 'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2607533352,3339442344&fm=26&gp=0.jpg'
				},
				{
					id: '1',
					name: '南瓜',
					price: 10,
					count: 3,
					size: '中等',
					sumPrice: 30,
					stock: 10,
					img: 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3387044952,2039738596&fm=26&gp=0.jpg'
				},
				{
					id: '2',
					name: '红枣',
					price: 10,
					count: 4,
					size: '迷你',
					sumPrice: 40,
					stock: 11,
					img: 'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2872794674,3215826466&fm=26&gp=0.jpg'
				}
			]

			// list数组中为每一项添加双向绑定的属性---这个属性要在页面显示(onShow)添加
			orginList.forEach(el => el.isChecked = false);

			this.list = orginList;

			console.log(this.list)



		},
		onLoad() {

		}
	}
</script>


<style lang="scss" scoped>
	page {
		background: #f1e8e7;
	}

	.cart {
		background: #f1e8e7;
	}

	.c {
		width: 670rpx;
		margin: 0 auto;
	}

	// 居中显示
	@mixin textCenter {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.list {
		width: 672rpx;
		height: 208rpx;
		background: #f9f9f9;
		box-shadow: 0 8rpx 16rpx 0 rgba(83, 66, 49, 0.08);
		border-radius: 24rpx;
		border-radius: 24rpx;
		margin-top: 32rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.l {
			display: flex;

			.img {
				width: 136rpx;
				height: 136rpx;
				background-color: pink;
				margin-left: 10rpx;
				border-radius: 8%;
			}
		}

		.center {
			width: 170rpx;

			.name {
				font-size: 26rpx;
				color: #3E3E3E;
				letter-spacing: 1.86rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.size {
				font-size: 22rpx;
				color: #8D8D8D;
				letter-spacing: 1.57rpx;
			}

			.count {
				font-size: 22rpx;
				color: #8D8D8D;
				letter-spacing: 1.57rpx;
			}
		}

		.r {
			.price {
				margin-top: 40rpx;
				font-size: 26rpx;
				color: red;
				letter-spacing: 0;
				margin-left: 40rpx;
			}

			// 加减数量
			.update-count {
				margin-top: 40rpx;
				display: flex;

				.reduce {
					width: 40rpx;
					height: 40rpx;
					background: #F1ECE7;
					border-radius: 21.6rpx;
					border-radius: 21.6rpx;
					color: #979797;
					@include textCenter;
					font-size: 50rpx;
				}

				.add {
					width: 40rpx;
					height: 40rpx;
					background: #F1ECE7;
					border-radius: 21.6rpx;
					border-radius: 21.6rpx;
					color: #979797;
					@include textCenter;
					font-size: 40rpx;
				}

				.cart-count {
					width: 72rpx;
					height: 40rpx;
					background: #F1ECE7;
					border-radius: 21.6rpx;
					border-radius: 21.6rpx;
					margin-left: 18rpx;
					margin-right: 18rpx;
					text-align: center;
					line-height: 40rpx;
				}
			}
		}

	}


	// 底部导航
	.tabbar {
		width: 100%;
		height: 176rpx;
		background-color: #f3f3f3;
		position: fixed;
		bottom: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-radius: 8% 8%;

		.all {
			font-size: 32rpx;
			color: #3E3E3E;
			letter-spacing: 2.29rpx;
			display: flex;
		}

		.totalPrice {
			font-size: 32rpx;
			color: #3E3E3E;
			letter-spacing: 2.29rpx;
			color: red;
		}

		.submitOrder {
			width: 208rpx;
			height: 80rpx;
			background: #354E44;
			border-radius: 14rpx;
			border-radius: 14rpx;
			font-size: 36rpx;
			color: #FFFFFF;
			letter-spacing: 2.57rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>